<template>
	<a-form :model="formParams" ref="formParamsRef" style="max-width: 600px" auto-label-width="auto" :rules="rules">
		<a-form-item field="name" label="主题：">
			<a-input v-model.trim="formParams.name" placeholder="名称" :max-length="20" show-word-limit ref="nameRef"></a-input>
		</a-form-item>
		<a-form-item label="召集人：">
			<ComAvatar :size="24" :sex="userList.find((item) => item.id === loginId)?.sex" :name="userList.find((item) => item.id === loginId)?.initialLetter" />
			<span class="name">{{ userList?.find((item) => item.id === loginId)?.nickname }}</span>
			<span>({{ userList?.find((item) => item.id === loginId)?.email }})</span>
		</a-form-item>
		<a-form-item field="userIds" label="参与人：" class="last-item">
			<div class="user-list">
				<a-select v-model="formParams.userIds" placeholder="请选择参与人员" multiple class="user-select">
					<template #label="{ data }">
						<ComAvatar :size="26" :sex="userList.find((item) => item.id === data.value)?.sex" :name="userList.find((item) => item.id === data.value)?.initialLetter" />
					</template>
					<a-option v-for="item in userList" :key="item.id" :value="item.id" class="user-options" :disabled="item.id === loginId">
						<ComAvatar :size="26" :sex="item.sex" :name="item.initialLetter" class="avatar" />
						{{ item.nickname }} ({{ item.email }})
					</a-option>
				</a-select>
				<i class="EachApp EachApp_sousuo1 search" @click="handleChoose"></i>
			</div>
		</a-form-item>
		<a-form-item label="内容描述：">
			<a-textarea v-model.trim="formParams.fromData" placeholder="请输入内容描述" style="height: 120px" />
		</a-form-item>
	</a-form>
	<!-- 新增对话 -->
	<ComModal v-model:visible="modalVisible" title="选择成员" @handleCancel="myComponentRef?.handleCancel()" @handleSubmit="myComponentRef?.handleSubmit()" :disabled="!myComponentRef?.userCheckedNew.length">
		<component :is="myComponent" ref="myComponentRef" v-bind="$attrs" :userList="userList" :userChecked="formParams.userIds" @handleClose="modalVisible = false" @handleSubmit="handleAddSubmit"></component>
	</ComModal>
</template>
<script lang="ts" setup>
interface Props {
  addressBookUser: UserInfoEntity[]
  userList: UserInfoEntity[]
}
const props = defineProps<Props>()
import { FormInstance } from '@arco-design/web-vue';
import type { UserInfoEntity } from '@/entity/UserEntity';
import * as ApiMsg from '@/api/im';
import { useUserStore } from '@/stores/modules/user';
const loginId: number = useUserStore().userInfo?.id || 0
const ChooseUser = defineAsyncComponent(() => import('./ChooseUser.vue'));
const emit = defineEmits(['handleClose']);
const modalVisible = ref(false);
const myComponent = ref<Component | null>(null)
const myComponentRef = ref<InstanceType<typeof ChooseUser> | null>(null)
const comUploadRef = ref(null);
const nameRef = ref<HTMLInputElement | null>(null);
const formParamsRef = ref<FormInstance>()
interface FormParams {
	avatar: string;
	name: string;
	fromData: string;
	userIds: number[];
}
const formParams = ref<FormParams>({
	avatar: '', // 头像
	name: '', // 群聊名称
	fromData: '', // 群聊描述
	userIds: [], // 群聊成员
});
const rules = reactive({
	name: [{ required: true, message: '请输入会话名称', trigger: 'blur' }],
	userIds: [{ required: true, message: '请选择参与人', trigger: 'change' }],
});
watch(
	() => props.addressBookUser,
	(e: UserInfoEntity) => {
		if (e?.id) {
			const isHave = formParams.value.userIds.includes(e.id);
			if (!isHave) {
				formParams.value.userIds = [e.id];
			}
		}
	},
	{ deep: true, immediate: true },
);

onMounted(() => {
	nextTick(() => {
		if(nameRef.value){
			nameRef.value.focus();
		}
	});
});

// 选择成员
const handleChoose = (): void => {
	myComponent.value = ChooseUser;
	modalVisible.value = true;
};

// 提交-添加
const handleSubmit = async () => {
	const valid = await formParamsRef.value.validate();
	if (valid) return;
	try {
		const params = {
			...formParams.value,
			userIds: [loginId, ...formParams.value.userIds]
		};
		const res = await ApiMsg.ApiChatAdd(params);
		const items = {
			sendId: loginId,
			name: formParams.value.name,
			topicId: res,
		};
		formParams.value.userIds = [];
		emit('handleClose', items);
		formParams.value.name = '';
	} catch (err) {
		console.log(err);
	}
};

const handleAddSubmit = (data: number[]) => {
	formParams.value.userIds = data;
};

defineExpose({
	handleSubmit,
	formParams,
	formParamsRef,
	comUploadRef,
});
</script>
<style lang="scss">
.user-options {
	.avatar {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-right: 10px;
	}
	.arco-checkbox-label {
		display: flex;
		align-items: center;
	}
}
</style>
<style lang="scss" scoped>
.arco-form {
	.name {
		margin: 0 5px;
	}
}
:deep(.user-list) {
	width: 100%;
	position: relative;
	.search {
		position: absolute;
		right: 10px;
		top: 5px;
		color: #999;
		cursor: pointer;
	}
	.avatar {
		width: 22px;
		height: 22px;
		border-radius: 50%;
		margin-right: 10px;
	}
	.arco-select-view {
		height: 36px;
	}
	.user-select {
		.arco-select-view-suffix {
			display: none;
		}
		.arco-select-view-input {
			min-height: 28px;
		}
	}
}
</style>
